<template>
  <div id="team-collaboration">
    <!-- 导航栏 -->
    <Navbar />
    
    <!-- 页面头部 -->
    <section class="page-header">
      <div class="container">
        <div class="header-content">
          <h1 class="page-title">团队协作流程</h1>
          <p class="page-subtitle">高效协作，公平分配，共同成长</p>
        </div>
      </div>
    </section>

    <!-- 流程介绍 -->
    <section class="process-section">
      <div class="container">
        <div class="section-header">
          <h2>协作流程详解</h2>
          <p>我们采用科学的团队协作机制，确保每位成员都能在项目中发挥最大价值</p>
        </div>

        <div class="process-steps">
          <!-- 步骤1：任务接取 -->
          <div class="process-step">
            <div class="step-number">1</div>
            <div class="step-content">
              <h3>任务接取阶段</h3>
              <div class="step-details">
                <div class="detail-item">
                  <i class="fas fa-tasks"></i>
                  <div>
                    <h4>选择组队模式</h4>
                    <p>在平台接取任务时，您可以选择"组队接取"模式，系统将为您匹配合适的团队成员</p>
                  </div>
                </div>
                <div class="detail-item">
                  <i class="fas fa-search"></i>
                  <div>
                    <h4>智能匹配</h4>
                    <p>基于技能互补、时间安排和项目需求，为您推荐最合适的协作伙伴</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤2：团队组建 -->
          <div class="process-step">
            <div class="step-number">2</div>
            <div class="step-content">
              <h3>团队组建阶段</h3>
              <div class="step-details">
                <div class="detail-item">
                  <i class="fas fa-user-plus"></i>
                  <div>
                    <h4>灵活招募</h4>
                    <p>任务进行过程中，团队可以继续招募新成员加入，扩大协作规模</p>
                  </div>
                </div>
                <div class="detail-item">
                  <i class="fas fa-handshake"></i>
                  <div>
                    <h4>角色分工</h4>
                    <p>根据成员专长和项目需求，合理分配角色和职责，确保高效协作</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤3：协作执行 -->
          <div class="process-step">
            <div class="step-number">3</div>
            <div class="step-content">
              <h3>协作执行阶段</h3>
              <div class="step-details">
                <div class="detail-item">
                  <i class="fas fa-cogs"></i>
                  <div>
                    <h4>实时协作</h4>
                    <p>团队成员可以实时沟通、分享资源、协同工作，确保项目进度</p>
                  </div>
                </div>
                <div class="detail-item">
                  <i class="fas fa-chart-line"></i>
                  <div>
                    <h4>进度跟踪</h4>
                    <p>系统实时跟踪每个成员的工作进度和贡献度，确保项目透明化</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤4：成果分配 -->
          <div class="process-step">
            <div class="step-number">4</div>
            <div class="step-content">
              <h3>成果分配阶段</h3>
              <div class="step-details">
                <div class="detail-item">
                  <i class="fas fa-balance-scale"></i>
                  <div>
                    <h4>公平评估</h4>
                    <p>基于实际贡献度进行勋章和证书分配，而非加入时间，确保公平公正</p>
                  </div>
                </div>
                <div class="detail-item">
                  <i class="fas fa-trophy"></i>
                  <div>
                    <h4>贡献奖励</h4>
                    <p>根据工作质量、创新程度、协作精神等多维度评估，给予相应奖励</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心优势 -->
    <section class="advantages-section">
      <div class="container">
        <div class="section-header">
          <h2>核心优势</h2>
          <p>我们的协作机制具有以下独特优势</p>
        </div>

        <div class="advantages-grid">
          <div class="advantage-card">
            <div class="advantage-icon">
              <i class="fas fa-users-cog"></i>
            </div>
            <h3>灵活组队</h3>
            <p>支持任务进行中动态调整团队规模，随时吸纳优秀人才加入</p>
          </div>

          <div class="advantage-card">
            <div class="advantage-icon">
              <i class="fas fa-chart-pie"></i>
            </div>
            <h3>贡献度评估</h3>
            <p>多维度量化评估体系，确保奖励分配基于实际贡献而非时间</p>
          </div>

          <div class="advantage-card">
            <div class="advantage-icon">
              <i class="fas fa-shield-alt"></i>
            </div>
            <h3>公平公正</h3>
            <p>透明的评估机制，杜绝论资排辈，让真正有贡献的成员获得认可</p>
          </div>

          <div class="advantage-card">
            <div class="advantage-icon">
              <i class="fas fa-rocket"></i>
            </div>
            <h3>高效协作</h3>
            <p>智能匹配和实时协作工具，最大化团队工作效率</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 参与方式 -->
    <section class="participation-section">
      <div class="container">
        <div class="section-header">
          <h2>如何参与</h2>
          <p>简单几步，开启您的团队协作之旅</p>
        </div>

        <div class="participation-steps">
          <div class="participation-step">
            <div class="step-icon">
              <i class="fas fa-user-plus"></i>
            </div>
            <h3>注册账号</h3>
            <p>创建您的个人账号，完善技能档案</p>
          </div>

          <div class="participation-step">
            <div class="step-icon">
              <i class="fas fa-search"></i>
            </div>
            <h3>浏览任务</h3>
            <p>浏览平台任务，选择感兴趣的项目</p>
          </div>

          <div class="participation-step">
            <div class="step-icon">
              <i class="fas fa-handshake"></i>
            </div>
            <h3>组队协作</h3>
            <p>选择组队模式，与志同道合的伙伴协作</p>
          </div>

          <div class="participation-step">
            <div class="step-icon">
              <i class="fas fa-trophy"></i>
            </div>
            <h3>获得奖励</h3>
            <p>根据贡献度获得相应的勋章和证书</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系方式 -->
    <section class="contact-section">
      <div class="container">
        <div class="section-header">
          <h2>联系我们</h2>
          <p>如有任何问题，欢迎随时联系我们</p>
        </div>
        <PhoneSlider />
      </div>
    </section>

    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script>
import Navbar from '../components/Navbar.vue'
import Footer from '../components/Footer.vue'
import PhoneSlider from '../components/PhoneSlider.vue'

export default {
  name: 'TeamCollaboration',
  components: {
    Navbar,
    Footer,
    PhoneSlider
  },
  mounted() {
    // 页面加载后滚动到顶部
    window.scrollTo(0, 0)
  }
}
</script>

<style scoped>
/* 页面头部样式 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 120px 0 80px;
  text-align: center;
}

.page-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.page-subtitle {
  font-size: 1.3rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* 通用section样式 */
.process-section,
.advantages-section,
.participation-section,
.contact-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
  color: white;
  margin-bottom: 1rem;
}

.section-header p {
  font-size: 1.1rem;
  color: white;
  max-width: 600px;
  margin: 0 auto;
}

/* 流程步骤样式 */
.process-steps {
  max-width: 1000px;
  margin: 0 auto;
}

.process-step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 60px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.process-step:hover {
  transform: translateY(-5px);
}

.step-number {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 30px;
  flex-shrink: 0;
}

.step-content h3 {
  font-size: 1.8rem;
  color: white;
  margin-bottom: 20px;
}

.step-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.detail-item i {
  color: #667eea;
  font-size: 1.5rem;
  margin-top: 5px;
  flex-shrink: 0;
}

.detail-item h4 {
  font-size: 1.2rem;
  color: white;
  margin-bottom: 8px;
}

.detail-item p {
  color: white;
  line-height: 1.6;
}

/* 优势卡片样式 */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.advantage-card {
  text-align: center;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.advantage-card:hover {
  transform: translateY(-10px);
}

.advantage-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.advantage-icon i {
  color: white;
  font-size: 2rem;
}

.advantage-card h3 {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 15px;
}

.advantage-card p {
  color: white;
  line-height: 1.6;
}

/* 参与方式样式 */
.participation-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.participation-step {
  text-align: center;
  position: relative;
}

.participation-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 40px;
  right: -20px;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.step-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.step-icon i {
  color: white;
  font-size: 2rem;
}

.participation-step h3 {
  font-size: 1.3rem;
  color: white;
  margin-bottom: 10px;
}

.participation-step p {
  color: white;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.5rem;
  }
  
  .page-subtitle {
    font-size: 1.1rem;
  }
  
  .process-step {
    flex-direction: column;
    text-align: center;
  }
  
  .step-number {
    margin: 0 auto 20px;
  }
  
  .step-details {
    grid-template-columns: 1fr;
  }
  
  .participation-step:not(:last-child)::after {
    display: none;
  }
}
</style>
